<script lang="ts">
export default {
  name: 'kaoshi5'
}
</script>
<script lang="ts" setup>
import { computed, ref } from 'vue'

// 使用 Vue 3 的响应式数据来管理一个简单的任务列表。
// 当任务未完成时，任务名称显示为黑色，当任务完成时，任务名称显示为绿色并带有删除线。
// 通过点击任务，可以切换任务的完成状态。
// 使用计算属性来显示已完成任务的数量。
// 使用条件渲染，当没有任务时，显示“没有任务”。

// 响应式数据，用于管理任务列表
const tasks = ref([
  { name: '任务1', completed: false },
  { name: '任务2', completed: false }
  // 可以根据需要添加更多任务
])
// 计算属性，用于计算已完成的任务数量
const completedTasksCount = computed(() => tasks.value.filter((task) => task.completed).length)

// 切换任务状态的方法
const toggleTaskStatus = (task: { completed: boolean }) => {
  task.completed = !task.completed
}
</script>
<template>
  <div>
    <h2>任务列表</h2>

    <!-- 当没有任务时显示 -->
    <p v-if="tasks.length === 0">没有任务</p>

    <!-- 当有任务时显示 -->
    <ul v-else>
      <li
        v-for="task in tasks"
        :key="task.name"
        :class="{ completed: task.completed, 'not-completed': !task.completed }"
      >
        <span>{{ task.name }}</span>
        <button @click="toggleTaskStatus(task)">切换状态</button>
      </li>
    </ul>

    <p>已完成任务数：{{ completedTasksCount }}</p>
  </div>
</template>
<style lang="scss" scoped>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}

.completed {
  color: green;
  text-decoration: line-through;
}

.not-completed {
  color: black;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #0056b3;
}
</style>
